<template> 
  <div class="report-container"> 
    <el-card shadow="never"> 
      <!-- 搜索栏 --> 
      <div class="filter-header"> 
        <el-input 
          v-model="filter.id"  
          placeholder="编号" 
          style="width: 100px" 
          class="filter-item" 
        /> 
        <el-input 
          v-model="filter.studentId"  
          placeholder="学生学号" 
          style="width: 120px; margin-left: 10px" 
          class="filter-item" 
        /> 
        <el-input 
          v-model="filter.category"  
          placeholder="类别" 
          style="width: 120px; margin-left: 10px" 
          class="filter-item" 
        /> 
        <el-button type="primary" style="margin-left: 15px" @click="handleSearch">搜索</el-button> 
        <el-button style="margin-left: 10px" @click="handleReset">重置</el-button> 
      </div> 
 
      <!-- 数据表格 --> 
      <el-table 
        :data="filteredData" 
        style="width: 100%" 
        header-row-class-name="table-header" 
      > 
        <el-table-column prop="id" label="编号" width="80" align="center" /> 
        <el-table-column prop="category" label="类别" width="150" /> 
        <el-table-column prop="deadline" label="截至时间" width="120" /> 
        <el-table-column prop="studentId" label="学生学号" width="120" align="center" /> 
        <el-table-column prop="studentName" label="学生姓名" width="120" /> 
        <el-table-column prop="content" label="周报内容" width="180" show-overflow-tooltip> 
          <template slot-scope="scope"> 
            {{ scope.row.content  || '-' }} 
          </template> 
        </el-table-column> 
        <el-table-column prop="score" label="分数" width="100" align="center" /> 
        <el-table-column prop="actualScore" label="实际得分" width="120" align="center"> 
          <template slot-scope="scope"> 
            {{ scope.row.actualScore  || '-' }} 
          </template> 
        </el-table-column> 
        <el-table-column prop="comment" label="教师评语" width="180" show-overflow-tooltip> 
          <template slot-scope="scope"> 
            {{ scope.row.comment  || '-' }} 
          </template> 
        </el-table-column> 
        <el-table-column label="操作" width="100" align="center"> 
          <template slot-scope="scope"> 
            <el-button type="text" size="mini" @click="handleEdit(scope.row)"> 修改</el-button> 
          </template> 
        </el-table-column> 
      </el-table> 
 
      <!-- 分页信息 --> 
      <div class="pagination-info"> 
        第 1 到 {{ filteredData.length  }} 条，共 {{ filteredData.length  }} 条记录。 
      </div> 
 
      <!-- 修改对话框 --> 
      <el-dialog :visible.sync="dialogVisible"  title="修改周报信息" width="50%">
        <el-form :model="editForm" label-width="100px">
          <el-form-item label="编号">
            <el-input v-model="editForm.id"  disabled></el-input>
          </el-form-item>
          <el-form-item label="类别">
            <el-input v-model="editForm.category"></el-input> 
          </el-form-item>
          <el-form-item label="截至时间">
            <el-date-picker 
              v-model="editForm.deadline" 
              type="datetime"
              placeholder="选择截止时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm"
              :default-time="['23:59:59']"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="学生学号">
            <el-input v-model="editForm.studentId"  disabled></el-input>
          </el-form-item>
          <el-form-item label="学生姓名">
            <el-input v-model="editForm.studentName"  disabled></el-input>
          </el-form-item>
          <el-form-item label="周报内容">
            <el-input type="textarea" v-model="editForm.content"  :rows="3"></el-input>
          </el-form-item>
          <el-form-item label="分数">
            <el-input-number v-model="editForm.score"  :min="0" :max="100" :precision="2"></el-input-number>
          </el-form-item>
          <el-form-item label="实际得分">
            <el-input-number v-model="editForm.actualScore"  :min="0" :max="100" :precision="2"></el-input-number>
          </el-form-item>
          <el-form-item label="教师评语">
            <el-input type="textarea" v-model="editForm.comment"  :rows="3"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSave">保存</el-button>
        </div>
      </el-dialog>
    </el-card> 
  </div> 
</template> 
 
<script> 
export default { 
  data() { 
    return { 
      filter: { 
        id: '', 
        studentId: '', 
        category: '' 
      }, 
      tableData: [ 
        { id: 1, category: '第 1 次周报', deadline: '2020-01-13', studentId: '1', studentName: '泊停', content: '-', score: '20.00', actualScore: '-', comment: '-' }, 
        { id: 2, category: '第 2 次周报', deadline: '2020-01-24', studentId: '1', studentName: '泊停', content: '-', score: '20.00', actualScore: '-', comment: '-' }, 
        { id: 3, category: '第 3 次周报', deadline: '2020-02-04', studentId: '1', studentName: '泊停', content: '-', score: '20.00', actualScore: '-', comment: '-' }, 
        { id: 4, category: '第 4 次周报', deadline: '2020-02-15', studentId: '1', studentName: '泊停', content: '-', score: '20.00', actualScore: '-', comment: '-' }, 
        { id: 5, category: '第 5 次周报', deadline: '2020-02-26', studentId: '1', studentName: '泊停', content: '333333333333...', score: '20.00', actualScore: '11', comment: '优秀！' }, 
        { id: 6, category: '总结', deadline: '2020-02-28', studentId: '1', studentName: '泊停', content: '111111111111111...', score: '100.00', actualScore: '100', comment: '23333333333333...' }, 
        { id: 7, category: '第 1 次周报', deadline: '2022-03-27', studentId: '48', studentName: '王超', content: '-', score: '20.00', actualScore: '-', comment: '-' }, 
        { id: 8, category: '第 2 次周报', deadline: '2022-06-19', studentId: '48', studentName: '王超', content: '-', score: '20.00', actualScore: '-', comment: '-' }, 
        { id: 9, category: '第 3 次周报', deadline: '2022-09-11', studentId: '48', studentName: '王超', content: '-', score: '20.00', actualScore: '-', comment: '-' }, 
        { id: 10, category: '第 4 次周报', deadline: '2022-12-04', studentId: '48', studentName: '王超', content: '-', score: '20.00', actualScore: '-', comment: '-' } 
      ], 
      filteredData: [], 
      dialogVisible: false, 
      editForm: {} 
    }; 
  }, 
  created() { 
    this.filteredData  = this.tableData;  
  }, 
  methods: { 
    handleSearch() { 
      this.filteredData  = this.tableData.filter(item  => { 
        return ( 
          (this.filter.id  === '' || item.id.toString().includes(this.filter.id))  && 
          (this.filter.studentId  === '' || item.studentId.includes(this.filter.studentId))  && 
          (this.filter.category  === '' || item.category.includes(this.filter.category))  
        ); 
      }); 
    }, 
    handleReset() { 
      this.filter  = { 
        id: '', 
        studentId: '', 
        category: '' 
      }; 
      this.filteredData  = this.tableData;  
    }, 
    handleEdit(row) { 
      this.editForm  = { ...row }; 
      this.dialogVisible  = true; 
    }, 
    handleSave() { 
      const index = this.tableData.findIndex(item  => item.id  === this.editForm.id  && item.studentId  === this.editForm.studentId);  
      if (index !== -1) { 
        this.tableData[index]  = { ...this.editForm  }; 
        this.filteredData  = this.tableData.filter(item  => { 
          return ( 
            (this.filter.id  === '' || item.id.toString().includes(this.filter.id))  && 
            (this.filter.studentId  === '' || item.studentId.includes(this.filter.studentId))  && 
            (this.filter.category  === '' || item.category.includes(this.filter.category))  
          ); 
        }); 
      } 
      this.dialogVisible  = false; 
    } 
  } 
}; 
</script> 
 
<style scoped> 
.report-container { 
  padding: 20px; 
} 
 
.filter-header { 
  display: flex; 
  align-items: center; 
  margin-bottom: 20px; 
} 
 
.filter-item { 
  margin-left: 10px; 
} 
 
.table-header th { 
  background-color: #f5f7fa !important; 
  font-weight: 600; 
} 
 
.pagination-info { 
  margin-top: 15px; 
  color: #909399; 
  font-size: 13px; 
  text-align: center; 
} 
 
.el-button--text { 
  color: #409EFF; 
  padding: 0 5px; 
} 
 
.el-table .cell { 
  white-space: nowrap; 
} 
</style> 